<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Quiz</title>
    
    <script src="http://www.google.com/jsapi?key=ABQIAAAA-W9uqIa2PP530F8zDw7ifhRzWAkh1BJXTJPjs-VxE17765CtzxTMrSE7KOShOGqhmxrFQXXL8tipng"
      type="text/javascript"></script>
    <script type="text/javascript">

var geocoder;
var address;
var counter;
var zoom = 14;

function load() {
  if (GBrowserIsCompatible()) {
	geocoder = new GClientGeocoder();
	if (FORM_DATA["zip"]) {
		geocoder.getLatLng(FORM_DATA["zip"], function(thePoint) {
			zoom = 14;
			displayMap(thePoint);
		});	
	} else if (FORM_DATA["city"] && FORM_DATA["state"]) {
		geocoder.getLatLng(FORM_DATA["city"] + ", " + FORM_DATA["state"] + ", United States", function(thePoint) {
			zoom = 10;
			displayMap(thePoint);
		});
	} else if (FORM_DATA["state"]) {
		geocoder.getLatLng(FORM_DATA["state"] + ", United States", function(thePoint) {
			zoom = 7;
			displayMap(thePoint);
		});
	} else {
		zoom = 10;
	 	thePoint = null;
	 	if (google.loader.ClientLocation.latitude && google.loader.ClientLocation.longitude) {
	 		thePoint = new GLatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude)
	 	}
		displayMap(thePoint);
	}
  }
}


function displayMap(point) {
	map = new GMap2(document.getElementById("map"), {"draggableCursor":"pointer"});
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());

	GEvent.addListener(map,"click", function(overlay, latlng) {     
		if (latlng) { 
			getDistrict(latlng);
		}
	});

	if (point == null) {
		map.setCenter(new GLatLng(39, -96), 4);
	} else {
		map.setCenter(point, zoom);
	}
	
}

function getDistrict(latlng) {
   	$("#instructions").empty();
   	FORM_DATA.latitude = latlng.lat();
   	FORM_DATA.longitude = latlng.lng();
	$.post(LOCATION_SERVICE, FORM_DATA, function (data) { printDistrictResults(data); }, "json");
	$("#instructions").text("Looking up the information... One moment please...");	
}


function printDistrictResults(obj) {
	str = "There was an error. Please try again.";
	if (obj != null) {
		if (obj.result == "ok") {
			if (obj.district) {
				if ((obj.district.rep) && (obj.district.jrsen) && (obj.district.srsen)) {
					str = "Got it.  If you don't see the quiz soon, then reload the page.";
					location.reload();
				} else {
					str = "Hmmm... there was a problem.  Try clicking the map again.";
				}
			}
		} else {
			str = obj.message;
		}
	}
	$("#instructions").empty();
	$("#instructions").text(str);
	window.scrollTo(0,400);
}


function createRequestObject() {
  FORM_DATA = new Object();
  separator = ',';
  query = '' + this.location;
  qu = query;
  query = query.substring((query.indexOf('?')) + 1);
  if (query.length < 1) { return false; }  // Perhaps we got some bad data?
  keypairs = new Object();
  numKP = 1;
  while (query.indexOf('&') > -1) {
    keypairs[numKP] = query.substring(0,query.indexOf('&'));
    query = query.substring((query.indexOf('&')) + 1);
    numKP++;
  }
  keypairs[numKP] = query;
    // Store what's left in the query string as the final keypairs[] data.<
  for (i in keypairs) {
    keyName = keypairs[i].substring(0,keypairs[i].indexOf('='));
      // Left of '=' is name.
    keyValue = keypairs[i].substring((keypairs[i].indexOf('=')) + 1);
      // Right of '=' is value.
    while (keyValue.indexOf('+') > -1) {
      keyValue = keyValue.substring(0,keyValue.indexOf('+')) + ' ' + keyValue.substring(keyValue.indexOf('+') + 1);
        // Replace each '+' in data string with a space.
    }
    keyValue = unescape(keyValue);
      // Unescape non-alphanumerics
    if (FORM_DATA[keyName]) {
      FORM_DATA[keyName] = FORM_DATA[keyName] + separator + keyValue;
    } else {
      FORM_DATA[keyName] = keyValue;
    }
  }
  return FORM_DATA;
}

var FORM_DATA = createRequestObject();
var LOCATION_SERVICE = "/fb/updatelocation";

google.load("maps", "2");
google.load("jquery", "1");

</script>
<link href="http://representedby.appspot.com/includes/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="fbbody" onload="load()" onunload="GUnload()">
  	<div id="container" style="width:732px">
	<h2 id="instructions">Where do you live?  Click on the area so we can find your legislators.</h2>
    <div id="map" style="width:730px;height:400px"></div>
	</div>
  </body>
</html>
